{% extends "base.html" %}

{% block title %}首页 - 智能竞赛信息平台{% endblock %}

{% block content %}

<div class="content-area">
    <!-- 页面标题和搜索区域 -->
    <div class="page-header">
        <h1 class="page-title">精选竞赛推荐</h1>
        <p class="page-subtitle">发现最适合您的竞赛机会</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索竞赛名称、描述或详细信息..." class="search-input">
            <button id="searchBtn" class="search-btn">
                <iconify-icon icon="material-symbols:search" width="20"></iconify-icon>
            </button>
        </div>
        
        <div class="filter-options">
            <select id="categoryFilter" class="filter-select">
                <option value="">全部分类</option>
                <option value="理工科">理工科</option>
                <option value="计算机">计算机</option>
                <option value="综合">综合</option>
                <option value="创新创业">创新创业</option>
                <option value="语言">语言</option>
                <option value="医学">医学</option>
                <option value="经济">经济</option>
            </select>
            
            <select id="statusFilter" class="filter-select">
                <option value="">全部状态</option>
                <option value="upcoming">即将开始</option>
                <option value="ongoing">进行中</option>
                <option value="finished">已结束</option>
            </select>
            
            <select id="sortFilter" class="filter-select">
                <option value="">默认排序</option>
                <option value="popularity_desc">热度最高</option>
                <option value="popularity_asc">热度最低</option>
                <option value="start_date_asc">开始时间最早</option>
                <option value="start_date_desc">开始时间最晚</option>
                <option value="end_date_asc">结束时间最早</option>
                <option value="end_date_desc">结束时间最晚</option>
                <option value="rating_desc">评级最高</option>
                <option value="rating_asc">评级最低</option>
            </select>
            
            <button id="clearFilters" class="clear-btn">清除筛选</button>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
        <div class="stat-card">
            <div class="stat-number" id="totalCompetitions">0</div>
            <div class="stat-label">总竞赛数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" id="activeCompetitions">0</div>
            <div class="stat-label">进行中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number" id="upcomingCompetitions">0</div>
            <div class="stat-label">即将开始</div>
        </div>
    </div>

    <!-- 竞赛展示区域 -->
    <div class="competitions-section">
        <div class="section-header">
            <h2 class="section-title">推荐竞赛</h2>
            <div class="view-options">
                <button class="view-btn active" data-view="grid">
                    <iconify-icon icon="material-symbols:grid-view" width="20"></iconify-icon>
                </button>
                <button class="view-btn" data-view="list">
                    <iconify-icon icon="material-symbols:view-list" width="20"></iconify-icon>
                </button>
            </div>
        </div>

        <!-- 竞赛网格容器 -->
        <div id="competitions-container" class="competitions-grid">
            <!-- 竞赛卡片将通过JavaScript动态加载 -->
        </div>

        <!-- 加载状态 -->
        <div id="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p class="loading-text">加载竞赛数据中...</p>
        </div>

        <!-- 无结果提示 -->
        <div id="no-results" class="no-results" style="display: none;">
            <iconify-icon icon="material-symbols:search-off" width="48" style="color: #9CA3AF;"></iconify-icon>
            <h3>未找到相关竞赛</h3>
            <p>请尝试调整搜索条件或筛选选项</p>
        </div>
    </div>
</div>
{% endblock %}